<template>
  <div class="app-container home">
    <el-row :gutter="20" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-col :sm="18" :lg="18">
        <!-- 简介 -->
        <el-row>
          <el-col :span="12">
            <el-card class="des-box">
              <div slot="header" class="clearfix">
                <div class="flex fbt">
                  <span>商户联盟</span>
                  <span style="color: red;">1000元/年</span>
                </div>
              </div>
              <div class="body">
                <p v-html="des"></p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="des-box">
              <div slot="header" class="clearfix">
                <div class="flex fbt">
                  <span>自营版商户联盟</span>
                  <span style="color: red;">6800元/套</span>
                </div>
              </div>
              <div class="body">
                <p v-html="des2"></p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 定制开发 -->
        <el-row>
          <el-col :span="24">
            <el-card class="custom">
              <div slot="header" class="clearfix">
                <span>定制开发</span>
              </div>
              <div class="body">
                <p >
                  系统支持定制开发，根据你自己的业务需求定制系统功能，支持对接第三方账号交易平台，打通多端数据，实现同步上下架。如需定制请与我们联系。联系微信：jiaoyitang88。
                </p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card class="notice-box">
          <div slot="header" class="clearfix">
            <span>系统公告</span>
          </div>
          <el-collapse accordion>
            <el-collapse-item :title="item.noticeTitle" v-for="item in notices" :key="item.noticeId">
              
              <p class="cont" v-html="item.noticeContent"></p>
            </el-collapse-item>
            
          </el-collapse>
        </el-card>
        <el-card class="qur-box">
          <div slot="header" class="clearfix">
            <span>问题反馈</span>
          </div>
          <div class="body">
            <span style="display: inline-block; height: 30px; line-height: 30px">
              <a href="https://docs.qq.com/sheet/DY3dDcUltdk5pZ25U?tab=BB08J2">我要反馈</a>
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>成为代理</span>
          </div>
          <div class="body">
            <p>
              联系我们成为代理帮助我们进行系统推广，帮助更多的游戏账号商户用上我们的系统，同时拓宽你的账号获取渠道，每成功推广一个商户返还商户入驻费用的50%给你作为你的佣金。期待更多商户的加入！
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" >
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>常见问题</span>
          </div>
          <div class="body">
            <p>1、授权问题，联系微信：jiaoyitang88</p>
            <p>2、系统使用问题，联系微信：jiaoyitang88</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import homeApi from "@/api/home/index"
export default {
  name: "Index",
  data() {
    return {
      //
      des: `<p>虞都交易服务管理系统是商丘市虞都网络科技有限公司开发，经过3年内部使用测试，最终上线的一套功能完善，安全稳定的游戏账号交易服务系统。</p>
<p>商丘市虞都网络科技有限公司从事账号交易服务10年，深耕游戏账号交易行业，结合对行业深入了解，行业痛点，深度定制功能模块，全方位覆盖游戏账号交易业务场景。现向行业开放系统化服务帮助行业内解决账号管理难，对接难，团队管理难，业务流程规范性实施落地。</p>`,
des2: `<p>商户自营版系统和商户联盟功能完全一样，但是自营版是整个系统打包出售，独立部署在商户自己的服务器上，完全独立运营，交易数据自己掌握，同时可以组织自己的商户联盟，聚合更多商户进行资源共享。</p>
<p>虞都交易服务管理系统是商丘市虞都网络科技有限公司开发，经过3年内部使用测试，最终上线的一套功能完善，安全稳定的游戏账号交易服务系统。</p>`,
      notices:[]
    };
  },
  created(){
    this.getNoticeList()
  },
  components: {},
  methods: {
   getNoticeList(){
     homeApi.getNoticeList({
       status:0,
       noticeType:'2'
     }).then(res=>{
       console.log('%c 🍸 res: ', 'font-size:20px;background-color: #E41A6A;color:#fff;', res);
        this.notices = res.rows.splice(0,4)
     })
   }
  }
};
</script>

<style scoped lang="scss">
.app-container{
  min-width: 940px;
}
.des-box{
  margin-right: 20px;
  text-indent: 2em;
  margin-bottom: 20px;
  .body{
    min-height: 150px;
  }
}
.custom{
  margin-right: 20px;
}
.update-log{
  margin-bottom: 20px;
}
.body{
  text-indent: 2em;
}
.clearfix{
  font-weight: 600;
}
.notice-box{
  min-width: 320px;
  margin-bottom: 20px;
  min-height: 300px;
  .cont{
    text-indent: 2em;
    max-height: 200px;
    overflow-y: auto;
  }
}
.qur-box{
  min-width: 320px;
  min-height: 120px;
}
.flex{
  display: flex;

}
.fbt{
  justify-content: space-between;
}
</style>

